<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康分析 | VigorLoop</title>
    <!--STYLESHEET-->
    <!--=================================================-->
    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
          rel='stylesheet' type='text/css'>
    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/bootstrap.min.css" rel="stylesheet">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="/static/nifty/css/nifty.min.css" rel="stylesheet">
    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="/static/nifty/css/demo/nifty-demo-icons.min.css" rel="stylesheet">
    <!--Morris.js [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/morris-js/morris.min.css" rel="stylesheet">
    <!--DataTables [ OPTIONAL ]-->
    <link href="/static/nifty/plugins/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/static/nifty/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css" rel="stylesheet">
    <!--JAVASCRIPT-->
    <!--=================================================-->
    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="/static/nifty/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="/static/nifty/plugins/pace/pace.min.js"></script>
    <!--jQuery [ REQUIRED ]-->
    <script src="/static/nifty/js/jquery-2.2.4.min.js"></script>
    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/bootstrap.min.js"></script>
    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="/static/nifty/js/nifty.min.js"></script>
    <!--=================================================-->
    <!--Demo script [ DEMONSTRATION ]-->
    <script src="/static/nifty/js/demo/nifty-demo.min.js"></script>
    <!--Morris.js [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/morris-js/morris.min.js"></script>
    <script src="/static/nifty/plugins/morris-js/raphael-js/raphael.min.js"></script>
    <!--Sparkline [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Flot Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.min.js"></script>
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.resize.min.js"></script>
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.time.js"></script>
    <!--Flot Pie Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/flot-charts/jquery.flot.pie.min.js"></script>
    <!--Gauge js [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/gauge-js/gauge.min.js"></script>
    <!--Easy Pie Chart [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
    <!--DataTables [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/datatables/media/js/jquery.dataTables.js"></script>
    <script src="/static/nifty/plugins/datatables/media/js/dataTables.bootstrap.js"></script>
    <script src="/static/nifty/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
    <!--DataTables Sample [ SAMPLE ]-->
    <script src="/static/nifty/js/demo/tables-datatables.js"></script>
    <!--Gauge js [ OPTIONAL ]-->
    <script src="/static/nifty/plugins/gauge-js/gauge.min.js"></script>
    <!--Easy Pie Chart [ OPTIONAL ]-->
    <script src=/static/nifty/plugins/easy-pie-chart/jquery.easypiechart.min.js"></script>
</head>

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">
    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">
            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="" class="navbar-brand">
                    <img src="/static/nifty/img/logo.png" alt="VigorLoop Logo"
                         class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">VigorLoop</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->
            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content clearfix">
                <ul class="nav navbar-top-links pull-left">
                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-view-list"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->
                </ul>
                <ul class="nav navbar-top-links pull-right">
                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
									<span class="pull-right">
										<i class="demo-pli-male ic-user"></i>
									</span>
                            <div class="username hidden-xs">
                                {% if user.is_authenticated %}{{ user.username }}{% else %}未登录用户{% endif %}</div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-md dropdown-menu-right panel-default">
                            <!-- Dropdown heading -->
                            <div class="pad-all bord-btm">欢迎使用
                                VigorLoop！
                            </div>
                            <!-- User dropdown menu -->
                            <ul class="head-list">
                                <li>
                                    <a href="/user_center/">
                                        <i href="/logout/" class="demo-pli-male icon-lg icon-fw"></i>个人中心
                                    </a>
                                </li>
                            </ul>
                            <!-- Dropdown footer -->
                            <div class="pad-all text-right">
                                <a href="/logout/" class="btn btn-primary">
                                    <i class="demo-pli-unlock"></i>退出
                                </a>
                            </div>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->
        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->
    <div class="boxed">
        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container" style="height: 100vh">
            <!--Page Title-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div id="page-title">
                <h1 class="text-lg-center">个人健康助手</h1>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End page title-->
            <!-- 页面内容 -->
            <div id="page-content">
                <div class="row">
                    <!-- BMI分析 -->
                    {% for result in analysis_bmi_result %}
                    <div class="col-md-12 col-lg-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">BMI 分析</h3>
                            </div>
                            <div class="panel-body">
                                <div class="progress progress-xl">
                                    <div class="progress-bar progress-bar-{{ result.bmi_color }}" style="width: {{ result.bmi_width }}%; transition: width 1s ease;">
                                        {% if result.bmi %}
                                        {{ result.bmi }} BMI
                                        {% else %}
                                        无 BMI 数据
                                        {% endif %}
                                    </div>
                                </div>
                                {% if result.bmi_color == 'success' %}
                                <p>您的 BMI 值属于正常范围 (18.5 - 24)</p>
                                {% elif result.bmi_color == 'warning' %}
                                <p>您的 BMI 值稍高 (24 - 30)</p>
                                {% elif result.bmi_color == 'danger' %}
                                <p>您的 BMI 值偏低或过高，建议咨询医生</p>
                                {% else %}
                                <p>暂无 BMI 数据</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            
                <div class="row">
                    <!-- 血压分析 -->
                    {% for result in analysis_bp_result %}
                    <div class="col-md-12 col-lg-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">血压分析</h3>
                            </div>
                            <div class="panel-body">
                                <div class="progress progress-xl">
                                    <div class="progress-bar progress-bar-{{ result.bp_color }}" style="width: {{ result.bp_width }}%; transition: width 1s ease;">
                                        {% if result.systolic_bp %}
                                        收缩压: {{ result.systolic_bp }} mmHg 舒张压: {{ result.diastolic_bp }} mmHg
                                        {% else %}
                                        无有效血压数据
                                        {% endif %}
                                    </div>
                                </div>
                                {% if result.bp_status == 'normal' %}
                                <p>您的血压值正常。</p>
                                {% elif result.bp_status == 'hypotension' %}
                                <p>您的血压偏低。</p>
                                {% elif result.bp_status == 'prehypertension' %}
                                <p>您的血压偏高，建议咨询医生。</p>
                                {% elif result.bp_status == 'hypertension_stage_1' %}
                                <p>高血压第一阶段，建议咨询医生。</p>
                                {% elif result.bp_status == 'hypertension_stage_2' %}
                                <p>高血压第二阶段，建议立即咨询医生。</p>
                                {% elif result.bp_status == 'hypertensive_crisis' %}
                                <p>高血压危象，紧急情况，需立刻就医。</p>
                                {% else %}
                                <p>暂无血压数据</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            
                <div class="row">
                    <!-- 血糖分析 -->
                    {% for result in analysis_bg_result %}
                    <div class="col-md-12 col-lg-12">
                        <div class="panel">
                            <div class="panel-heading">
                                <h3 class="panel-title">血糖分析</h3>
                            </div>
                            <div class="panel-body">
                                <div class="progress progress-xl">
                                    <div class="progress-bar progress-bar-{{ result.glucose_color }}" style="width: {{ result.glucose_width }}%; transition: width 1s ease;">
                                        {% if result.blood_glucose %}
                                        {{ result.blood_glucose }} mmol/L
                                        {% else %}
                                        无有效血糖数据
                                        {% endif %}
                                    </div>
                                </div>
                                {% if result.glucose_status == 'normal' %}
                                <p>您的血糖值处于正常范围 (3.9 - 5.6 mmol/L)</p>
                                {% elif result.glucose_status == 'hypoglycemia' %}
                                <p>您的血糖值过低，建议尽快就医。</p>
                                {% elif result.glucose_status == 'prediabetes' %}
                                <p>您的血糖值偏高，属于糖尿病前期，建议注意饮食。</p>
                                {% elif result.glucose_status == 'diabetes' %}
                                <p>您的血糖值偏高，可能是糖尿病，建议立即就医。</p>
                                {% else %}
                                <p>暂无血糖数据</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>


    <!--===================================================-->
    <!--END CONTENT CONTAINER-->
    <!--MAIN NAVIGATION-->
    <!--===================================================-->
    <nav id="mainnav-container">
        <div id="mainnav">
            <!--Menu-->
            <!--================================-->
            <div id="mainnav-menu-wrap">
                <div class="nano">
                    <div class="nano-content">
                        <!--Profile Widget-->
                        <!--================================-->
                        <div id="mainnav-profile" class="mainnav-profile">
                            <div class="profile-wrap">
                                <div class="pad-btm">
                                    <img class="img-circle img-sm img-border"
                                         src="/static/nifty/img/profile-photos/1.png"
                                         alt="Profile Picture">
                                </div>
                                <a href="#profile-nav" class="box-block"
                                   data-toggle="collapse" aria-expanded="false">
                                    <p class="mnp-name">{% if user.is_authenticated %}{{ user.username }}{% else %}
                                        未登录用户{% endif %}</p>
                                </a>
                            </div>
                        </div>
                        <ul id="mainnav-menu" class="list-group">
                            <!--Category name-->
                            <li class="list-header">健康中心</li>
                            <!--Menu list item-->
                            <li>
                                <a href="/index/">
                                    <i class="demo-psi-home"></i>
                                    <span class="menu-title">
												<strong>首页</strong>
											</span>
                                </a>
                            </li>
                            <!--Menu list item-->
                            <li>
                                <a href="#">
                                    <i class="demo-psi-boot-2"></i>
                                    <span class="menu-title">
												<strong>我的运动数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>
                                <!--Submenu-->
                                <ul class="collapse">
                                    <li>
                                        <a href="/exercise_info/exercise_record/">查看运动数据</a>
                                    </li>
                                    <li>
                                        <a href="/exercise_info/add_exercise_record/">新增运动数据</a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="demo-psi-star"></i>
                                    <span class="menu-title">
												<strong>我的运动目标</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>

                                <!--Submenu-->
                                <ul class="collapse">
                                    <li><a href="/exercise_info/exercise_goal/">查看运动目标</a></li>
                                    <li><a href="/exercise_info/add_exercise_goal/">新增运动目标</a></li>
                                </ul>
                            </li>

                            <!--Menu list item-->
                            <li class="active-sub active">
                                <a href="/health_profile/">
                                    <i class="demo-psi-receipt-4"></i>
                                    <span class="menu-title">
												<strong>我的健康数据</strong>
											</span>
                                    <i class="arrow"></i>
                                </a>
                                <!--Submenu-->
                                <ul class="collapse">
                                    <li>
                                        <a href="/health_profile/">查看健康数据</a>
                                    </li>
                                    <li>
                                        <a href="/health_profile/add/">新增健康数据</a>
                                    </li>
                                    <li class="active-link">
                                        <a href="/health_profile/analysis">健康分析</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="list-divider"></li>
                            <!--Category name-->
                            <li class="list-header">其他</li>
                            <!--Menu list item-->
                            <li>
                                <a href="/user_center/">
                                    <i class="demo-psi-male"></i>
                                    <span class="menu-title">
												<strong>个人中心</strong>
											</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--================================-->
            <!--End menu-->
        </div>
    </nav>
    <!--===================================================-->
    <!--END MAIN NAVIGATION-->
</div>
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
</body>

</html>